<script setup>
// 引入 api
import { ref } from "vue"

// 类对象
const btnClass = ref({
    "text-center": true,
    "text-red": false
})

// 点击函数
function btn() {
    btnClass.value['text-red'] = btnClass.value['text-red'] ? false : true
}
</script>

<template>
    <!-- 段落 -->
    <p @click="btn" :class="btnClass">这是一段文本</p>
</template>

<style scoped>
.text-center {
    text-align: center;
}

.text-red {
    color: red;
}
</style>